iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

log Vue 一下系列 第 5

Vue一下 五日:實作一個Todo List

  • 分享至 

  • xImage
  •  

這篇反而沒有程式碼

為什麼?因為這應是影片的精華,就是要花錢的意思,今天只會分享一些想法、流程,其他只能靠讀者嘗試、google跟爬官網了。

CRUD

實作一個Todo List,這直覺讓我想到之前學RoR時的CRUD,有興趣的人可以去google,分別是:
Create, Read, Update, Delete

Todo List要達成的目的不離以上:
Create:新增一個任務項目
Read:在頁面上可見眾任務們的狀態
Update:修改任務的內容
Delete:刪除已完成任務

舉個例子:
C 新增:把 11/11 跟Natalie喝酒這個待辦加進去
R 顯示任務:(未完成)11/11 跟Natalie喝酒、(已完成)10/10 跟Toby喝酒
U 更新、修改:Natalie還想順便去買酒,改成 11/11 跟Natalie喝酒買酒
D 刪除:5/15 的事情已經完成好久囉!把它刪掉吧~ 10/10 跟Toby喝完酒之後也沒什麼特別的提醒事項或約定,那也刪掉好了

create

我們把這些待辦塞入陣列之後,再用 v-for列出來,所以我們要宣告一個陣列。而其他的步驟會使用到很多陣列的運用
參考網站:MDN web doc 陣列的運用
其中把元素加入陣列的方式就有介紹不只一種:

  1. 把元素指定指向末端 index(arrayName.length)
  2. 用 push()

陣列的處理在操作資料時很~常~使用到,所以多看多練習囉!

我們在新增輸入處的input botton中塞入v-on:click='createTodo'的方法,方法的寫法就會使用到上述的把元素加入陣列

read

切換頁籤功能:全部/未完成/已完成

我們可以給這些頁籤,加入不同的 css style用以區分,像是背景色變不同表示當前頁、黯淡半透明表示其他頁。這邊直接控制 active class,active這個 class name是 bs做好現成的css+js,可以呈現這種切換使用中項目的效果,例如這個w3schools的Home Bootstrap Navigation Bar,如要自己做可以參考w3schools How TO - Add Active Class to Current Element
在三個頁籤的標籤裡(可能會是三個<a></a>也可能會是三個<button></button>)要顯示全部的加入 :class=“{‘active’: visibility == ‘all’}” @click=“ visibility == ‘all’ ”。記得先宣告visibility
:跟@是v-bind:跟v-on的縮寫,在第三日的文章最下方API指令裡面有

實作過濾功能

頁籤可以切換了,不過還沒有篩選,我們把它寫在computed,method是沒有必須return的,過濾後要把資料呈現出來,所以我們用computed,動到的不是原本data,而是後來computed裡新宣告的資料

update

編輯的步驟有哪些,想想我們要修改任何現有的事物會怎麼做?假設我做了一道劉昴星名作:彗星炒飯,上發射台前 上桌前想到客人說要加辣沒給他加,那麽我們會:

  1. 將盤子收回來
  2. 丟回鍋子裡加入辣椒末狠狠地炒它
  3. 放回盤子

以上修改的步驟如同:

  1. 取得修改對象
  2. 進行修改
  3. 確認修改完畢

那麼另一種情況:要丟入辣椒末前客人突然想到最近內痔發作,不宜旺火氣,於是便衝進廚房吶喊不加辣了。那麼我們就在把它放回盤子發射台 上。
所以要改成:

  1. 取得修改對象
  2. 進行修改
  3. 取消修改/確認修改完畢

要編輯現有的資料,我們也要幫那些資料預先宣告,讓它們有容器暫時可以放,避免直接動到原始資料,這些資料可能是陣列、字串。

delete

刪除的注意事項在於,如果我們是用this.array.index來指定要刪除的該項,那我們切換到未完成頁面進行刪除,切回全部頁面會不會有什麼問題呢?這邊一樣就不公佈囉~請花小錢投資自己吧

小結

這篇好像很虛無,不要被吉、自保才能繼續寫鐵人賽,很想看程式碼的讀者我這裡推薦另一位鐵人選手跟他參考的網站
Magisheng Vue 學習筆記 - 讓你30天掌握 Vue 系列
Summer。桑莫。夏天 Todo List: Vue.js Example

http method/ RESTful:
[不是工程師] 休息(REST)式架構? 寧靜式(RESTful)的Web API是現在的潮流? progressbar.tw


上一篇
Vue一下 四日:表單綁定&組件components-財神爺相助
下一篇
Vue一下 六日:Class與Style綁定
系列文
log Vue 一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言